<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <title>异地备案登记申请</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="author" content="长天科技有限公司"/>
    <meta name="viewport"
          content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
    <meta http-equiv="Pragma" content="no-cache"/>
    <meta http-equiv="Expires" content="0"/>
    <meta http-equiv="Cache" content="no-cache">
    <link rel="stylesheet" href="./style/weui.css">
    <link rel="stylesheet" href="./style/example.css">
    <link rel="stylesheet" href="./style/font-awesome.min.css"/>

</head>

<body>
<div class="weui-toptips weui-toptips_warn" id="topTips">错误提示</div>
<div id="loadingToast" style="opacity: 0; display: none;">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast">
            <span class="weui-primary-loading weui-primary-loading_transparent weui-icon_toast">
              <span class="weui-primary-loading__dot"></span>
            </span>
        <p class="weui-toast__content">加载中</p>
    </div>
</div>

<div id="toast" style="opacity: 0; display: none;">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast">
        <i class="weui-icon-success-no-circle weui-icon_toast"></i>
        <p class="weui-toast__content">已完成</p>
    </div>
</div>

<div id="textToast" style="opacity: 0; display: none;">
    <div class="weui-mask_transparent"></div>
    <div class="weui-toast weui-toast_text">
        <p class="weui-toast__content">文字提示</p>
    </div>
</div>

<div class="container" id="container">
    <div class="page form_page js_show" id="ydjyApplyPage">
        <div class="weui-form">
            <div class="weui-form__text-area">
                <h2 class="weui-form__title">城市选择器示例</h2>
            </div>

            <div id="apply-form" class="weui-form__control-area" style="margin: 20px 0;">
                <div style="margin-left: 15px; margin-bottom: 10px; overflow: hidden;">
                    <span style="display: block; width: 5px; height: 25px; background: #10aeff; float: left; margin-right: 10px; border-radius: 2px;"></span>
                    <span style="float: left;">城市信息</span>
                </div>
                <div class="weui-cells__title">请认真填写以下信息</div>
                <div class="weui-cells weui-cells_form">
                    <div class="weui-cell weui-cell_active weui-cell_access" id="showCityPicker1">
                        <div class="weui-cell__hd"><label class="weui-label">省份1级
                            <spsn style="color: red; float: left; margin-right: 5px;">*</spsn>
                        </label></div>
                        <div class="weui-cell__bd weui-flex"><label id="city1-label"
                                                                    style="color: #ccc;">请选择省份</label>
                            <input id="city1" type="hidden" tips="请选择省份">
                        </div>
                        <div class="weui-cell__ft"></div>
                    </div>
                </div>

                <div class="weui-cells weui-cells_form">
                    <div class="weui-cell weui-cell_active weui-cell_access" id="showCityPicker2">
                        <div class="weui-cell__hd"><label class="weui-label">城市2级
                            <spsn style="color: red; float: left; margin-right: 5px;">*</spsn>
                        </label></div>
                        <div class="weui-cell__bd weui-flex"><label id="city2-label"
                                                                    style="color: #ccc;">请选择城市</label>
                            <input id="city2" type="hidden" tips="请选择城市">
                        </div>
                        <div class="weui-cell__ft"></div>
                    </div>
                </div>

                <div class="weui-cells weui-cells_form">
                    <div class="weui-cell weui-cell_active weui-cell_access" id="showCityPicker3">
                        <div class="weui-cell__hd"><label class="weui-label">城市区县3级
                            <spsn style="color: red; float: left; margin-right: 5px;">*</spsn>
                        </label></div>
                        <div class="weui-cell__bd weui-flex"><label id="city3-label"
                                                                    style="color: #ccc;">请选择城市区县</label>
                            <input id="city3" type="hidden" tips="请选择城市">
                        </div>
                        <div class="weui-cell__ft"></div>
                    </div>
                </div>
            </div>
            <div class="weui-form__opr-area">
                <a class="weui-btn weui-btn_primary" href="javascript:" id="make-sure">确定</a>
            </div>
        </div>

        <div class="page__ft j_bottom">
            <!--<a href="javascript:home()"><img src="images/icon_footer_link.png"></a>-->
        </div>
    </div>
</div>

<script type="text/javascript" src="./zepto.min.js"></script>
<script type="text/javascript" src="./js/jweixin-1.0.0.js"></script>
<script src="./js/weui.min.js"></script>
<script src="./js/city-data.js"></script>

<script type="text/javascript">
    $(function () {
        $('#make-sure').on('click', function () {
            var msg = "你选择的省份编码是：" + $('#showCityPicker1  #city1').val() +
                "\n你选择的城市编码是：" + $('#showCityPicker2  #city2').val() +
                "\n你选择的城市区县编码是：" + $('#showCityPicker3  #city3').val()
            alert();
        });

        $('#showCityPicker1').on('click', function () {
            weui.picker(cityData, {
                defaultValue: [110000],
                depth: 1,
                onChange: function (result) {
                    console.log(result);
                },
                onConfirm: function (result) {
                    console.log(result);
                    $('#showCityPicker1  #city1-label').html(result[0].label);
                    $('#showCityPicker1  #city1-label').css("color", "#000");
                    $('#showCityPicker1  #city1').val(result[0].value);
                },
                title: '省份'
            });
        });

        $('#showCityPicker2').on('click', function () {
            weui.picker(cityData, {
                defaultValue: [110000, 110000],
                depth: 2,
                onChange: function (result) {
                    console.log(result);
                },
                onConfirm: function (result) {
                    console.log(result);
                    $('#showCityPicker2  #city2-label').html(result[0].label + " - " + result[1].label);
                    $('#showCityPicker2  #city2-label').css("color", "#000");
                    $('#showCityPicker2  #city2').val(result[1].value);
                },
                title: '城市'
            });
        });

        $('#showCityPicker3').on('click', function () {
            weui.picker(cityData, {
                defaultValue: [110000, 110000, 110101],
                depth: 3,
                onChange: function (result) {
                    console.log(result);
                },
                onConfirm: function (result) {
                    console.log(result);
                    $('#showCityPicker3  #city3-label').html(result[0].label + " - " + result[1].label + " - " + result[2].label);
                    $('#showCityPicker3  #city3-label').css("color", "#000");
                    $('#showCityPicker3  #city3').val(result[2].value);
                },
                title: '城市区县'
            });
        });
    });

    function validateForm(id) {
        var validateNotPassCount = 0;
        var $inputs = $(id + ' input');
        $inputs.each(function () {
            if (this.value == null || this.value == undefined || this.value == '') {
                errorTips($(this).attr('tips'));
                validateNotPassCount++;
                return validateNotPassCount;
            }
        });
        return validateNotPassCount;
    }
</script>


<script>


    // loading
    function showLoading(msg) {
        var $loadingToast = $('#loadingToast');
        if ($loadingToast.css('display') != 'none') return;
        if (msg != undefined && msg != null) {
            $("#loadingToast .weui-toast__content").html(msg);
        } else {
            $("#loadingToast .weui-toast__content").html("请稍等……");
        }
        $loadingToast.fadeIn(100);
    }

    function hideLoading() {
        var $loadingToast = $('#loadingToast');
        if ($loadingToast.css('display') == 'none') return;
        $loadingToast.fadeOut(100);
    }

    function errorTips(errorMSg) {
        var $textToast = $("#textToast");
        if ($textToast.css('display') != 'none') return;
        var $textToastContent = $('#textToast .weui-toast__content');
        $textToastContent.html(errorMSg)
        $textToast.fadeIn(100);
        setTimeout(function () {
            $textToast.fadeOut(100);
        }, 1000);
    }

</script>
</body>

</html>